<template>
  <div class="paymentmiddle">
    <div class="paymentmiddle_top">
      <div class="top_box">
        <div class="box_title">
          <p class="title_x" @click="handleclick()">X</p>
          <p class="title_text">请输入支付密码</p>
        </div>
        <div class="payment">支付金额</div>
        <div class="price">￥{{ this.freight }}</div>
        <div class="password">
          <van-password-input
            :value="value"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
          />
        </div>
        <div v-if="isShow" class="pop">密码输入错误，请重新输入。</div>
      </div>
    </div>
    <div class="paymentmiddle_boottom">
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.freight = this.$route.query.num;
    this.text = this.$route.query.text;
  },
  data() {
    return {
      freight: 0,
      value: "",
      showKeyboard: true,
      paymentCode: "",
      isShow: false,
      isShowNum: 0,
      text: "",
    };
  },
  methods: {
    handleclick() {
      // const freight = this.freight;
      const text = this.text;
      this.$router.push({ path: "/layout/home", query: { text } });
    },
  },
  watch: {
    value: function () {
      if (this.isShowNum < 3) {
        if (this.value.length == 6) {
          if (this.value == "666888") {
            console.log("密码输入正确！！！");
            this.$router.push({
              path: "/paymentok",
              query: { freight: this.freight, text: this.text},
            });
          } else {
            this.isShowNum += 1;
            this.isShow = true;
            this.value = "";
          }
        }
      } else {
        this.value = "";
        console.log("密码输错三次！请联系管理员！");
      }
    },
  },
};
</script>

<style  lang="scss" scoped>
.paymentmiddle {
  width: 100%;
  height: 100%;
  background: #777777;
}
.paymentmiddle_top {
  width: 100%;
  height: 45%;
  position: relative;
}
.top_box {
  width: 70%;
  height: 300px;
  position: absolute;
  background: #fff;
top: 30%;
  left: 15%;
  border-radius: 20px;
  position: relative;
}
.box_title {
  width: 80%;
  height: 60px;
  border-bottom: 1px #b9d6fe solid;
  display: flex;
  line-height: 40px;
  margin-left: 20px;
}
.title_x {
  width: 50px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  // margin-left: 30px;
}
.title_text {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.payment {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.price {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  font-size: 30px;
  font-weight: bold;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.password {
  width: 100%;
  // height: 40px;
  text-align: center;
  position: absolute;
  top:80%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pop {
  width: 100%;
  height: 40px;
  text-align: center;
  position: absolute;
  top: 90%;
  left: 50%;
  line-height: 40px;
  color: red;
  transform: translate(-50%, -50%);
}
.paymentmiddle_boottom {
  width: 100%;
  height: 45%;
}
</style>